<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多项调节服务可视化</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script> -->
    <!-- <link rel="stylesheet" href="style.css"> -->
    <script src="../js/chart.js"></script>
    <script src="../js/xlsx.full.min.js"></script>
    <script src="../js/echarts.min.js"></script>
    <script src="../js/echarts_china.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        #chartContainer {
            width: 80%;
            margin: 0 auto;
        }
        #mapContainer1， #mapContainer2, #mapContainer3 {
            width: 80%;
            /* height: 80%; */
            height: 800px;
            margin: 20px auto;
        }
        select {
            margin-bottom: 20px;
        }
        table {
            width: 80%;
            margin: 20px auto;
            border-collapse: collapse;
            text-align: center;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
        }
        th {
            background-color: #f2f2f2;
        }
        nav {
            margin-bottom: 20px;
        }
        nav a {
            margin: 0 10px;
            text-decoration: none;
            color: #007BFF;
            font-weight: bold;
        }
        nav a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <nav>
        <a href="../html/calculate_service_percentage.html">计算调节服务占比</a>
        <a href="../html/pie_service_percentage.html">调节服务占比可视化</a>
        <a href="../html/single_service.html">单项调节各地区占比</a>
        <a href="../html/adjust_service_value.html">调整气候调节服务项的价值量</a>
        <a href="../html/multi_service.html">多项调节服务可视化</a>
    </nav>
    <h1>多项调节服务可视化</h1>
    <input type="file" id="fileInput" accept=".xlsx, .xls">

    <div id="mapContainer1" style="width: 600px; height: 400px;"></div>
    <div id="mapContainer2" style="width: 600px; height: 400px;"></div>
    <div id="mapContainer3" style="width: 600px; height: 400px;"></div>
    <table id="dataTable">
        <thead>
            <tr>
                <th>行政区划代码</th>
                <th>核算地区</th>
                <th>面积（km²）</th>
                <th>调节服务项</th>
                <th>生态系统</th>
                <th>实物量总值（t）</th>
                <th>价格（元/t）</th>
                <th>价值量总值（元）</th>
                <th>调节服务项占比（%）</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>


    <script>
        let myCharts = [];
        let jsonData; // 定义为全局变量
        
        let headers;
        let regionIndex;
        let serviceIndex;
        let quantityIndex;
        let valueIndex;
        let percentageIndex;

        document.getElementById('fileInput').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const data = e.target.result;
                    const workbook = XLSX.read(data, {type: 'binary'});
                    const sheetName = workbook.SheetNames[0];
                    const worksheet = workbook.Sheets[sheetName];
                    jsonData = XLSX.utils.sheet_to_json(worksheet, {header: 1});
                    // jsonData = sheet_to_json_data;

                    headers = jsonData[0];
                    regionIndex = headers.indexOf('核算地区');
                    serviceIndex = headers.indexOf('调节服务项');
                    quantityIndex = headers.indexOf('实物量总值（t）');
                    valueIndex = headers.indexOf('价值量总值（元）');
                    percentageIndex = headers.indexOf('调节服务项占比（%）');

                    drawMaps();
                    updateTable();
                };
                reader.readAsBinaryString(file);
            }
        });

        function formatRegionName(name) {
            const specialCases = {
                '广西壮族自治区': '广西',
                '内蒙古自治区': '内蒙古',
                '宁夏回族自治区': '宁夏',
                '新疆维吾尔自治区': '新疆',
                '西藏自治区': '西藏',
                '特别行政区': '' // 假设没有特别行政区的数据，如果有需要添加
            };

            if (specialCases[name]) {
                return specialCases[name];
            }

            const suffixesToRemove = ['省', '市'];
            for (let suffix of suffixesToRemove) {
                if (name.endsWith(suffix)) {
                    return name.slice(0, -suffix.length);
                }
            }
            return name;
        }

        function drawMaps() {
            const services = Array.from(new Set(jsonData.slice(1).map(row => row[serviceIndex])));
            services.forEach(service => {
                const filteredData = jsonData.slice(1).filter(row => row[serviceIndex] === service);
                console.log("filteredData",filteredData);
                const quantityData = filteredData.map(item => ({
                    name: formatRegionName(item[regionIndex]),
                    value: parseFloat(item[quantityIndex])
                }));
                console.log("quantityData",quantityData);
                const valueData = filteredData.map(item => ({
                    name: formatRegionName(item[regionIndex]),
                    value: parseFloat(item[valueIndex])
                }));
                console.log("valueData",valueData);
                const percentageData = filteredData.map(item => ({
                    name: formatRegionName(item[regionIndex]),
                    value: parseFloat(item[percentageIndex])
                }));
                console.log("percentageData",percentageData);

                myCharts.push(echarts.init(document.getElementById('mapContainer1')));
                myCharts.push(echarts.init(document.getElementById('mapContainer2')));
                myCharts.push(echarts.init(document.getElementById('mapContainer3')));

                myCharts[0].setOption({
                    title: { text: '实物量总值' },
                    tooltip: { trigger: 'item' },
                    visualMap: { min: 0, max: 100, left: 'left', top: 'bottom', calculable: true },
                    series: [{ type: 'map', mapType: 'china', data: quantityData }]
                });

                myCharts[1].setOption({
                    title: { text: '价值量总值' },
                    tooltip: { trigger: 'item' },
                    visualMap: { min: 0, max: 100, left: 'left', top: 'bottom', calculable: true },
                    series: [{ type: 'map', mapType: 'china', data: valueData }]
                });

                myCharts[2].setOption({

                    title: { text: '调节服务项占比' },
                    tooltip: { trigger: 'item' },
                    visualMap: { min: 0, max: 100, left: 'left', top: 'bottom', calculable: true },
                    series: [
                        {
                            name: '调节服务项名字1',
                            type: 'map',
                            mapType: 'china',
                            label: {
                                normal: {
                                    show: true
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            data: percentageData['调节服务项名字1']
                        },
                        {
                            name: '调节服务项名字2',
                            type: 'map',
                            mapType: 'china',
                            label: {
                                normal: {
                                    show: true
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            data: percentageData['调节服务项名字2']
                        },
                    ]
                });
            });
        }

        function updateTable() {
            const tableBody = document.getElementById('dataTable').getElementsByTagName('tbody')[0];
            tableBody.innerHTML = '';

            jsonData.slice(1).forEach(row => {
                const tr = document.createElement('tr');
                headers.forEach((header, index) => {
                    const td = document.createElement('td');
                    td.textContent = row[index];
                    tr.appendChild(td);
                });
                tableBody.appendChild(tr);
            });
        }
    </script>
</body>
</html>